<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>题库</title>
  <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
  <style>
    .foot{
      color: blue;
      display: none;
      font-size: 14px;

      background-color: #bfffd5;
      padding: 10px 15px;
      margin-top: 20px;
      line-height: 18px;

    }
   .ic1{
  display: none;
}
    .ic2{
  display: none;
}
    .center{
      width: 1200px;
      margin: 0 auto;}
    .img{
      background-image: url("http://rvg6mjj7z.hn-bkt.clouddn.com/img/true1.jpg");
      background-size: cover;
    }
  </style>
</head>
<body>
<div id="app">
  <el-container style="display: flex; flex-direction: column;">
    <my-header></my-header>
  <div class="img">
    <el-main class="center" >
      <el-row gutter="20">
        <el-col span="4">
           <el-card style="height: 300px">

             <el-aside width="200px">
               <el-menu :default-openeds="['1']" class="el-menu-vertical-demo">

                   <el-menu-item @click="error1()" >错题集</el-menu-item>
                   <el-menu-item @click="error2()">错题练习</el-menu-item>

               </el-menu>
             </el-aside>
<!--            <p @click="location.href='questionError.html'">我的错题</p>-->
<!--             <p @click="location.href='questionErrorExercise.html'">错题练习</p>-->
          </el-card>
        </el-col>

        <el-col span="20">
          <el-card>


          <div v-for="(w,index) in arr.slice(0,10)">
    <form>
      <h3>
        <div class="ic1" name="ic1">
          <svg t="1687693131777" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2535" id="mx_n_1687693131778" width="32" height="32"><path d="M800.5 512c0 159.3-129.1 288.5-288.5 288.5-99.6 0-187.4-50.4-239.2-127.2-31.1-46-49.3-101.5-49.3-161.3 0-159.3 129.1-288.5 288.5-288.5S800.5 352.7 800.5 512z" fill="#00F0D4" p-id="2536" data-spm-anchor-id="a313x.7781069.0.i5" class=""></path><path d="M475.8 633.1c-6.2 0-12.5-1.9-17.8-5.8l-94.9-69.9c-13.3-9.8-16.2-28.6-6.4-41.9s28.6-16.2 41.9-6.4l73.9 54.4 151.1-155c11.6-11.9 30.6-12.1 42.4-0.5 11.9 11.6 12.1 30.6 0.5 42.4L497.3 624c-5.9 6-13.7 9.1-21.5 9.1z" fill="#FFFFFF" p-id="2537" data-spm-anchor-id="a313x.7781069.0.i4" class=""></path></svg>
          </div>
        <div class="ic2" name="ic2">
          <svg t="1687694346544" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2384" width="32" height="32"><path d="M800.5 512c0 159.3-129.1 288.5-288.5 288.5-99.6 0-187.4-50.4-239.2-127.2-31.1-46-49.3-101.5-49.3-161.3 0-159.3 129.1-288.5 288.5-288.5S800.5 352.7 800.5 512z" fill="#FC355D" p-id="2385"></path><path d="M556.9 512l60.9-60.9c12.4-12.4 12.4-32.5 0-44.9-12.4-12.4-32.5-12.4-44.9 0L512 467.1l-60.9-60.9c-12.4-12.4-32.5-12.4-44.9 0-12.4 12.4-12.4 32.5 0 44.9l60.9 60.9-60.9 60.9c-12.4 12.4-12.4 32.5 0 44.9 6.2 6.2 14.3 9.3 22.5 9.3s16.3-3.1 22.5-9.3l60.9-60.9 60.9 60.9c6.2 6.2 14.3 9.3 22.5 9.3 8.1 0 16.3-3.1 22.5-9.3 12.4-12.4 12.4-32.5 0-44.9L556.9 512z" fill="#FFFFFF" p-id="2386"></path></svg>
        </div>
        <span>{{index+1}}</span>:{{w.question}}<br>
        <div>
          <label>
            <input type="radio" name="{{index}}" value="A" >{{w.optionA}}
          </label>
        </div>
        <div>
          <label>
            <input type="radio" name="{{index}}" value="B">{{w.optionB}}
          </label>
        </div>

        <div>
          <label>
            <input type="radio" name="{{index}}" value="C">{{w.optionC}}
          </label>
        </div>
        <div>
          <label>
            <input type="radio" name="{{index}}" value="D">{{w.optionD}}
          </label>
        </div>

        <div class="foot" name="co">
          <div>正确答案:{{w.answer}}
            <div>解析:{{w.analysis}}</div>
          </div>
        </div>
        <input type="radio" name="{{index}}" checked="checked" value="F" style="overflow: hidden; height:0; width:0;">

      </h3>


    </form>
  </div>
            <div style="text-align: center">

              <el-button :plain="true" @click="ok()" style="font-size: 20px;background-color: #14e5bb">提交</el-button>
              <el-button :plain="true" @click="shua()" style="font-size: 20px;background-color: #14e5bb">刷新</el-button>
</div>
          </el-card>
        </el-col>
      </el-row>

      </el-main>
</div>
</el-container>
</div>



<script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="js/my-header.js"></script>
<script>

  let v = new Vue({
    el:"body>div",
    data:{
      arr:[],//题目
      temp:[],//获取选项
      answer:[],//被选中的答案
      result:[],//错误的题
      temp2:[],//解析
      temp3:[],//题目
      temp4:[],//题目
      user:localStorage.user?JSON.parse(localStorage.user):null,
      result1:[],
      result2:{id:"",username:"",questionId:""}
    },
    created:function (){
      axios.get("/v1/question/select").then(function (response){
        v.arr = response.data;
      })
    },
    methods:{
      ok(){
        this.temp = document.getElementsByName("{{index}}");//获取选项
        this.temp2= document.getElementsByName("co")//获取解析
        this.temp3= document.getElementsByName("ic1")
        this.temp4= document.getElementsByName("ic2")

        // this.result2.username = this.user.username;
        for (let i=0,j=0;i<this.temp.length;i++){
          if(this.temp[i].checked){
            this.answer[j] = this.temp[i].value;//把被选中的答案放入集合
            j++;
          }
        }

        let result = [];
        let result1 = [];
        let result2 = { id: "", username: "", questionId: "" };
        result2.username = this.user.username;
        for (let i = 0,j=0; i <this.temp2.length; i++) {
          if(this.answer[i]!==this.arr[i].answer){
            this.temp2[i].setAttribute("style","color:red");//答题错误改变解析颜色
            this.temp4[i].setAttribute("style","display:block");//显示错误图标

            result[j] = i+1;//错误的题目
            result2.questionId=this.arr[i].id;
            result1[j] = Object.assign({}, result2);
            j++;
          }
          else {
            this.temp3[i].setAttribute("style","display:block");//显示正确图标

          }
        }

        let result4 = JSON.stringify(result1)
         axios.post("/v1/question/"+result2.username+"/insert",result4,{
           headers: {
             'Content-Type':  'application/json'
           }
         }).then(function (response){

         })
        $('.foot').show();
        if(result.length!==0){
          alert("你错误的题目是:"+result);
        }else {
          this.$message({
            message: '恭喜你，全部做对！',
            type: 'success'
          });
        }

      },
      shua(){
        location.reload();
      },
      error1(){
        location.href='questionError.html'

      },
      error2(){
        location.href='questionErrorExercise.html'

      }
    }
  })

</script>
</body>
</html>